<template>
  <div id="welcome">
    <div id="home_background" v-bind:class="[state]">
      <div class="welcomeTip">
        <h1>{{title}}</h1>
        <h3>{{welcomeTip}}</h3>
        <h2 class="jump"><router-link to="home">jump</router-link></h2>
      </div>      
    </div>
  </div>
</template>
<script>
    export default {
        data() {
            return {
                state:"wcx",
                title: "iWangcx's Blog",
                welcomeTip: `为自己吹过的牛逼奋斗终生`
            }
        },
        methods:{

        },
        components:{

        }
    }
</script>
<style lang="less">
    .hide{
      display: none;
    }
    #welcome {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #2c3e50;
      height: 100%;
      width: 100%;
      transition: all 0.8s linear;
      #main{
        width: 100%;
        height: 100%;
      }
    }
    #home_background{
        height: 100%;
        width:100%;
        background-image: url(../assets/img/home_bg.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: 1;
        position: relative;
        transition: all 0.8s linear;
    }
     #home_background.roll-down{
        transform: translate3d(0,-100%,0);
    }
     #home_background.roll-up{
        transform: translate3d(0,-0,0);
    }    
    .click-down{
        position: absolute;
        bottom: 5%;
        left: 50%;
        width: 50px;
        height: 50px;
        background-image: url();
        background-size: 100% 100%;
        font-style: italic;
        animation: pull-down 0.8s linear infinite;
        cursor: pointer;    
    }
    .click-up{
      bottom:-90%;
      right: 0;
      position: fixed;
      display: inline-block;
      height: 50px;
      width: 50px;
      background-size: 100% 100%;
      background-image: url(../assets/img/up_arrow.png);
      cursor: pointer;
    }
    #main_wrapper{
      background-color: #ffffff;
      height: 100%;
      width: 100%;
    }
    @keyframes pull-down
    {
        from {transform: translate(-50%,-50%);}
        to {transform: translate(-50%,0%);}
    }
    #nav{
        height: 100%;
        background-color: #545c64;
        width: 13%;
        min-width: 200px;
        float: left;
        border-right: solid 1px #e6e6e6;
    }
    .el-col-3{
        width: 100%;
    }
    .el-menu{
        border-right: none;
    }
    .welcomeTip{
      color: #fff;
      height: 200px;
      width: 750px;
      position: absolute;
      top: 40%;
      left: 50%;
      text-align: center;
      transform: translate(-50%,-50%);
      font-size: 30px;
    }
    h1{
          display: block;
          font-size: 2em;
          -webkit-margin-before: 0.67em;
          -webkit-margin-after: 0.67em;
          -webkit-margin-start: 0px;
          -webkit-margin-end: 0px;
          font-weight: bold;    
    }
    h3{
          display: block;
          font-size: 1.17em;
          -webkit-margin-before: 1em;
          -webkit-margin-after: 1em;
          -webkit-margin-start: 0px;
          -webkit-margin-end: 0px;
          font-weight: bold;    
    }
    #content{
      width: 800px;
      background-color: grey;
      margin: auto;
    }
    #write_wrapper{
      height: 100%;      
    }
</style>
